<template>
	<view class="index">
	<!-- 首页页面布局 -->
		<!-- 轮播图开始 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="banner">
			<block v-for="(item,index) in arr" :key="index">
				<swiper-item>
					<view class="swiper-item">
						<image :src="'http://jd.itying.com/'+item.pic" mode="widthFix" lazy-load></image>
					</view>
				</swiper-item>
			</block>
			
		</swiper>
		<!-- 轮播图结束 -->
		<!-- 分类布局开始 -->
		<view class="index_fen">
			<view class="index_fenOne " v-for="(item,index) in list" :key="index">
				<image :src="item.img" mode="widthFixw" lazy-load></image>
				<view class="index_fen_font">{{item.name}}</view>
			</view>
		</view>
		<!-- 分类布局结束 -->
		<!-- 广告布局开始 -->
		<image src="../../static/fen/12.jpg" mode="widthFix" lazy-load class="img"></image>
		<!-- 广告布局结束 -->
		<!-- 热门推荐商品 -->
		<view class="index_tui">
			<!-- 推荐栏 -->
			<view class="index_tui_one">
				<view class="index_tui_one_left"></view>
				<view class="index_tui_one_right">热门推荐</view>
			</view>
			<!-- 商品列表栏 -->
			<view class="index_tui_listAll">
				<block v-for="(item,index) in tui_list" :key="index">
					<view class="index_tui_list" @click="xq(item)">
						<image :src="'http://jd.itying.com/'+item.pic" mode="aspectFit" lazy-load ></image>
						<view class="index_tui_list_tex">{{item.title}}</view>
						<view class="index_tui_list_pic">
							<text>原件￥{{item.old_price}}</text>
							<text>现价￥{{item.price}}</text>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 猜你喜欢商品布局结束 -->
		<view class="index_tui">
			<!-- 推荐栏 -->
			<view class="index_tui_one">
				<view class="index_tui_one_left"></view>
				<view class="index_tui_one_right">猜你喜欢</view>
			</view>
			<!-- 商品列表栏 -->
			<view class="index_tui_listAll">
				<block v-for="(item,index) in tui_list1" :key="index">
					<view class="index_tui_list">
						<image :src="'http://jd.itying.com/'+item.pic" mode="aspectFit" lazy-load ></image>
						<view class="index_tui_list_tex">{{item.title}}</view>
						<view class="index_tui_list_pic">
							<text>原件￥{{item.old_price}}</text>
							<text>现价￥{{item.price}}</text>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 猜你喜欢布局结束 -->
		<view class="index_loading">
			{{sl}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sl:'上拉加载数据',
				page:1,
				tui_list:[],
				tui_list1:[],
				arr:[],
				list:[
					{
						img:'../../static/fen/4.jpg',
						name:'白酒'
					},
					{
						img:'../../static/fen/5.jpg',
						name:'啤酒'
					},
					{
						img:'../../static/fen/6.jpg',
						name:'葡萄酒'
					},
					{
						img:'../../static/fen/7.jpg',
						name:'清酒洋酒'
					},
					{
						img:'../../static/fen/8.jpg',
						name:'保健酒'
					},
					{
						img:'../../static/fen/9.jpg',
						name:'预调酒'
					},
					{
						img:'../../static/fen/10.jpg',
						name:'下酒小菜'
					},
					{
						img:'../../static/fen/11.jpg',
						name:'饮料'
					},
					{
						img:'../../static/fen/13.jpg',
						name:'乳制品'
					},
					{
						img:'../../static/fen/14.jpg',
						name:'休闲零食'
					}
				]
			}
		},
		onReachBottom() {//监听页面上拉触底事件
			
			if(this.sl!='上拉加载数据'){return false;}
			this.sl='加载中...';
			uni.showLoading({//显示加载动画
				title:'加载中...',
			})
			//猜你喜欢数据
			uni.request({
				url:'http://jd.itying.com/api/plist',
				data:{
					page:this.page,
					pageSize:10
				},
				success: (res) => {
					// console.log(res.data.result);
					var arr=res.data.result;
					 arr.forEach((item) =>
					          {item['pic'] = item['pic'].replace(new RegExp(/\\/g), '/')});
					
					console.log(arr.length<10);
					
					this.tui_list1=this.tui_list1.concat(arr);
					uni.hideLoading();//隐藏加载动画
					this.page++;
					this.sl='上拉加载数据';
					if(arr.length<10){
						this.sl='朕是有底线的~';
					}
					
				},fail: () => {
					console.log('猜你喜欢数据列表读取失败');
				}
			})
		},
		onLoad() {
			uni.request({//轮播图接口
				url:'http://jd.itying.com/api/focus',
				success: (res) => {
					// console.log(res.data.result);
					var arr=res.data.result;
					 arr.forEach((item) =>
					          {item['pic'] = item['pic'].replace(new RegExp(/\\/g), '/')});
					this.arr=arr;
					// console.log(JSON.stringify(this.arr));
				},fail: () => {
					console.log('轮播图读取失败');
				}
			});
			//热门推荐数据列表
			uni.request({
				url:'http://jd.itying.com/api/plist?is_best=1',
				success: (res) => {
					// console.log(res.data.result);
					var arr=res.data.result;
					 arr.forEach((item) =>
					          {item['pic'] = item['pic'].replace(new RegExp(/\\/g), '/')});
					this.tui_list=arr;
				},fail: () => {
					console.log('热门推荐数据列表读取失败');
				}
			})
			//猜你喜欢数据
			uni.request({
				url:'http://jd.itying.com/api/plist?page'+this.page,
				success: (res) => {
					// console.log(res.data.result);
					var arr=res.data.result;
					 arr.forEach((item) =>
					          {item['pic'] = item['pic'].replace(new RegExp(/\\/g), '/')});
					this.tui_list1=arr;
				},fail: () => {
					console.log('猜你喜欢数据列表读取失败');
				}
			})
		},
		methods: {
			xq(v){//点击推荐商品列表，进入详情页
				console.log(v._id);
				uni.navigateTo({
					url:'../home_xq/home_xq?id='+v._id
				})
				
			}
		}
	}
</script>

<style lang="scss">
	// 上拉加载布局
	.index_loading{
		text-align: center;
		height: 40upx;
		margin: 10upx 0;
		color: #C0C0C0;
	}
	// 热门推荐下的商品列表
	.index_tui_listAll{
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin:20upx 0;
		.index_tui_list{
			margin: 20upx 0;
			width:40%;
			text-align: center;
			padding: 0 30upx;
			image{
				width: 80%;
				height: 200upx;
			}
			.index_tui_list_tex{
				width: 100%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.index_tui_list_pic{
				font-size: 26upx;
				display: flex;
				justify-content: space-between;
				text{
					color: #C0C0C0;
					text-decoration: line-through;
					&:nth-child(2){
						text-decoration: none;
						color: red;
						font-size: 30upx;
					}
				}
				
			}
			
			
		}
	}
	// 热门推荐上布局
	.index_tui_one{
		height: 40upx;
		width: 100%;
		display: flex;
		align-items: center;
		.index_tui_one_left{
			height: 30upx;
			border: 2px solid red;
			margin: 0 30upx;
		}
		.index_tui_one_right{
			width: 80%;
			text-align: left;
		}
	}
	// 广告
	.img{
		width: 100%;
		margin: 20upx 0;
	}
	// 轮播图
	.banner{
		image{
			width: 100%;
			height: 400upx;
		}
	}
	// 分类
	.index_fen{
		width: 100%;
		height: 340upx;
		margin-top: 20upx;
		// border: 1px solid #007AFF;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.index_fenOne{
		width: 20%;
		image{
			width: 80upx;
			height:80upx;
		}
		.index_fen_font{
			font-size: 30upx;
			color: #C0C0C0;
		}
	}
</style>
